<template>
  <el-form :inline="true" :model="formData" class="search_box">
    <div class="from_item">
      <el-form-item label="原因名称">
        <el-input v-model="formData.name" placeholder="请输入原因名称" />
      </el-form-item>
      <el-form-item label="原因状态">
        <el-select v-model="formData.state" placeholder="流程状态">
          <el-option label="未开启" :value="1" />
          <el-option label="开启" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search_btn">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="onReset">清空</el-button>
        </div>
      </el-form-item>
    </div>
  </el-form>
  <div class="btn_box">
    <el-button type="primary" @click="onCreateLose">新建输单原因</el-button>
  </div>
  <LoseList ref="LoseListRef" :tableData="tableData" @submit="handleTable" />
  <LoseCreate ref="LoseCreateRef" @submit="getList" />
</template>

<script lang="ts" setup>
import LoseList from './LoseList.vue'
import LoseCreate from './LoseCreate.vue'
import { getLoseList, loseRank, loseDel } from '@/api/salesleads/salesmanagement/business'
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const LoseCreateRef = ref<any>()
const LoseListRef = ref<any>()
const formData = reactive({
  name: '',
  state: ''
})
const tableData = ref([])
const getList = () => {
  tableData.value = []
  getLoseList(formData).then((res: any) => {
    console.log('输单列表', res)
    tableData.value = res
    nextTick(() => {
      LoseListRef.value.setSortableFun()
    })
  })
}
onMounted(() => {
  getList()
})
const onReset = () => {
  formData.name = ''
  formData.state = ''
  getList()
}
const onCreateLose = () => {
  LoseCreateRef.value.visible = true
}
const handleTable = (type: string, row: any) => {
  const obj = {
    EDIT: () => {
      LoseCreateRef.value.visible = true
      LoseCreateRef.value.formData.name = row.name
      LoseCreateRef.value.formData.id = row.id
    },
    DELETE: () => loseDel({ id: row.id }).then((res: any) => {
      ElMessage.success('删除成功')
      getList()
    }),
    STORT: () => loseRank({ ids: row }).then(() => {
      getList()
    }),
  }
  obj[type]()
}
</script>

<style lang="scss" scoped>
.search_box {
  padding: 16px;
  background-color: #f9f9f9;

  .from_item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .el-form-item {
    margin-bottom: 0;

    .el-select {
      width: 100%;
    }
  }

  .search_btn {
    text-align: right;
  }
}

.btn_box {
  padding: 10px 24px 10px 0;
  text-align: right;
}
</style>
